import Image from "next/image";

import React from "react";
import { Button, Divider, List, Typography } from "antd";

export default function QuestDetail() {
  const data = [
    "Racing car sprays burning fuel into crowd.",
    "Japanese princess to wed commoner.",
    "Australian walks 100km after outback crash.",
    "Man charged over missing wedding girl.",
    "Los Angeles battles huge wildfires.",
  ];

  return (
    <main>
      <ul className="list-group">
        <li className="list-group-item active" aria-current="true">
          Afflites
        </li>
      </ul>
     

<table className="table  table-striped">
  <thead className="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name111111111111</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </main>
  );
}
